<template>
    <div class="help_container">
        <div class="banner_box">
            <h2 class="title">帮助中心</h2>
            <h3 class="text">全球联合办公租赁专家</h3>  
            <el-autocomplete class="inline_input" v-model="keyWord" :fetch-suggestions="querySearch" placeholder="请输入搜索内容">
                <el-button slot="append" style="background:#FFE300;color:#141414;" @click="fetchsearch">搜索</el-button>
            </el-autocomplete>
        </div>
        <div class="QA_contaier">
            <div class="QA_box">
                <div v-if="this.answerlist.length==0" :style="noanswer">
                  <img src="../../assets/img/noresult.jpg" alt="" style="width:300px;height:300px;margin-top:1vh;">
                </div>
                <div v-else v-for="(item,index) in answerlist" :key="index"> 
                  <p class="question">
                    Q：{{item.title}}？
                  </p>
                  <div class="answer_box">
                      <p class="answer">A：</p>
                      <span class="answer_text">
                          {{item.content}}   
                      </span> 
                  </div>
                </div>
            </div>

            <div class="form_box">
                <div class="consultation_box">
                    <ul class="Online_consultation">
                        <h2 class="Online_consultation_title">在线咨询</h2>
                        <li>
                            <img src="../../assets/img/reboot.png" alt="" class="img">
                            <span>房大机器人</span>
                        </li>
                        <li>
                            <img src="../../assets/img/wxservice.png" alt="" class="img">
                            <span>微信客服</span>
                        </li>
                        <li>
                            <img src="../../assets/img/phone.png" alt="" class="img">
                            <span>4008822692</span>
                        </li>
                    </ul>
                </div>
                <div class="help_box">
                    <ul class="help_box_list">
                        <h2 class="more_help">更多帮助</h2>
                        <h3 class="contact">找不到答案？联系我们办公专员</h3>
                        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0px" class="demo_ruleForm">
                            <el-form-item label="" prop="pass">
                                <el-input type="text" v-model="ruleForm.userName" autocomplete="off" class="text_input" placeholder="请输入姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="" prop="checkPass">
                                <el-input type="text" v-model="ruleForm.contactMethod" autocomplete="off" class="text_input" placeholder="请输入手机／Email"></el-input>
                            </el-form-item>
                            <el-form-item label="" prop="age">
                                <el-input type="textarea" v-model="ruleForm.content" class="text_input" placeholder="请输入咨询内容..."></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button style="width:380px;background:#FFE300;border-radius:6px;" @click="submitForm()">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import { getQAinfo,commitquestion, searchcontent } from "@/api/help"
export default {
  metaInfo: {
      title: "帮助",
      meta: [
        {
          name: "keywords",
          content: "办公,租赁,房源,生意经,活动,活动详情,帮助"
        },
        {
          name: "description",
          content: "房大办公帮助"
        }
      ]
  },
   data () {
      return {
        keyWord:'',
        answerlist:[],
        restaurants: [
            { "value": "房大办公平台提供什么服务？", "address": "长宁区新渔路144号" },
            { "value": "你们房大都哪里有房源？", "address": "上海市长宁区淞虹路661号" },
        ],
        //表单
        ruleForm: {
          userName: '',
          contactMethod: '',
          content: ''
          },
        rules: {
          userName: [{ trigger: 'blur' }],
          contactMethod: [{ trigger: 'blur' },{ type:'number'}],
          content: [{ trigger: 'blur' }]
        }    
      }
   },
   methods:{
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
    },
    createFilter(queryString) {
        return (restaurant) => {
            return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },

    // 搜索问题
    fetchsearch(){
      var reqParams = {
        keyWord:this.keyWord
      }
      searchcontent(reqParams).then((res)=>{
        if(res.data.code == 0){
          this.answerlist = re.data.data;
        }else{
          this.$message.error(res.data.msg)
        }
      })
      .catch((error)=>{
      })
    },

    //提交问题
    submitForm() {
      if(this.ruleForm.userName == ''){
        this.$message.error('请输入姓名！');
        return
      };
      var tellreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if(!tellreg.test(this.ruleForm.contactMethod)){
        this.$message.error('手机号格式不正确,请输入11位手机号码！');
        return
      };
      if(this.ruleForm.content == ''){
        this.$message.error('请输入咨询内容！');
        return
      }
      var reqParams = this.ruleForm;
      commitquestion(reqParams).then((res)=>{
        if(res.data.code == 0){
          this.$message.success('提交成功！')
        }else{
          this.$message.error(res.data.msg)
        }
      })
      .catch((error)=>{
      })
    }, 
  },
  computed:{
    noanswer(){
      return {
        display:'flex',
        justifyContent:'center',
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "./help.scss"; 
</style>
